	@extends('indexHome')


	@section('content')

<script type="text/javascript">
	 var regExp = new RegExp("\\w");

	$(document).ready(function() {
		// lan dau tien khi click vao khung post se xoa dong chu mac dinh vaf thay the vao bang 1 the br
	    $('.div-editable').bind('focus',function(e) { 
	    	if($( this ).children()[0].innerHTML == "status..."){
	        	$( this ).children()[0].innerHTML = "<br>";
	      	}
	    });
	    // lan dau tien khi nguoi dung go ky tu dau thi se tu dong them 1 the div de chua noi dung nguoi dung viet
	    $('.div-editable').bind('input',function(e) { 
	    	if($( this ).children()[0] == undefined){
	          $( this ).append('<div><br></div>');
	        }
	    });
	   // su kien khi nguoi dung go vao khung contenteditable
      	$(".div-editable").bind('keydown',function(e) {
      		// lay ra vi tri cua cont ro chuot
      		var positionCursorSaved = doSave($( this )[0]);
		    if(e.keyCode == 16 ) return;
		    // lay ra tap hop cac node can thao tac ( xem trong phan comment cua function trong file selection.js)
    		var nodesForcus = getNodeSelection();
    		//xac dinh nhung ky tu truoc do nguoi dung nhap la di 
		    var offset = window.getSelection().getRangeAt(0).endOffset -1;
		    // toan bo chuoi dang nhap
		    var data_char = window.getSelection().getRangeAt(0).commonAncestorContainer.data;
		    // lay ra nhung ky tu truoc va sau ky tu vua nhap
		    var prev_char,prev_prev_char,curr_char;
		     if(data_char != undefined ) {
		     	curr_char = data_char[offset];
		    	if(data_char[offset - 1] != undefined ){
		    		prev_char = data_char[offset - 1];
		    		if(data_char[offset - 2] != undefined) prev_prev_char = data_char[offset - 2];
		    	}
		    }
		    var prev_node = GetPreviousSibling(nodesForcus.node_focus);
		    var next_node = GetNextSibling(nodesForcus.node_focus);

		    if(nodesForcus.node_parent.nodeName == "A" || ( offset == 0 && prev_node != undefined && prev_node.nodeName == "A"  )) {
			    switch (e.keyCode) {
				    case 30:
				    case 40:
			            ev = $.Event("keydown");
					    ev.keyCode = ev.which = e.keyCode;
					    $(".typeahead").trigger(ev);
					    search_check = true;
				        e.preventDefault();
			            break;
				    case 13:
				    case 9:
				        e.preventDefault();
				        break;
				}
		    }
      	});

        $(".div-editable").bind('keyup', function(e) {
	    	var positionCursorSaved = doSave($( this )[0]);
		    switch (e.keyCode) {
			    case 30:
			    case 40:
			    	e.preventDefault();
			    	break;
			    case 13:
			    case 9:
		            ev = $.Event("keydown");
				    ev.keyCode = ev.which = e.keyCode;
				    $(".typeahead").trigger(ev);
		            break;
			}
    		var nodesForcus = getNodeSelection();
		    var offset = window.getSelection().getRangeAt(0).endOffset -1;
		    var data_char = window.getSelection().getRangeAt(0).commonAncestorContainer.data;
		    var prev_char,prev_prev_char,curr_char;
		    if(data_char != undefined ) {
		     	curr_char = data_char[offset];
		    	if(data_char[offset - 1] != undefined ){
		    		prev_char = data_char[offset - 1];
		    		if(data_char[offset - 2] != undefined) prev_prev_char = data_char[offset - 2];
		    	}
		    }
		    var prev_node = GetPreviousSibling(nodesForcus.node_focus);
		    var next_node = GetNextSibling(nodesForcus.node_focus);
		    if(nodesForcus.node_focus.nodeName == "A" || ( offset == 0 && prev_node != undefined && prev_node.nodeName == "A"  )) {
			    if(e.keyCode == 38 || e.keyCode == 40) {
			    		return false;
			    }
		    }
		    if(nodesForcus.node_focus.data != undefined && nodesForcus.node_parent.nodeName != "A" && regExp.test(curr_char) && ( nodesForcus.node_focus.data.search(" @") >= 0 || (nodesForcus.node_focus.data.search("@") == 0 && nodesForcus.node_parent.firstChild == nodesForcus.node_focus))) {
		    	var text_link = "";
		    	var len_data= nodesForcus.node_focus.data.length;
		    	var _start = 0, _end = 0;
		    	for(var i = 0 ; i < len_data; i++){
		    		if(nodesForcus.node_focus.data[i - 1] == "@" ){
		    			if(regExp.test(nodesForcus.node_focus.data[i]) && (nodesForcus.node_focus.data[i - 2] == " " || (nodesForcus.node_parent.firstChild == nodesForcus.node_focus && i - 1 == 0))){
			    			_end = i + 1;
			    			if(_start == 0){ _start=i - 1;}
			    			text_link += nodesForcus.node_focus.data[i];
		    			}
		    		}
		    	}
		    	linkSelection = {
					start: _start,
		            end: _end
				};
				restoreSelection(nodesForcus.node_focus, linkSelection);
				document.execCommand("CreateLink", true, text_link);
				$(".typeahead").eq(1).val(text_link).trigger("input");
				
				doRestore(document.getElementById("div-editable"),positionCursorSaved);
		    } else if ( prev_node != undefined && prev_node.nodeName == "A" ) {
				if ( regExp.test(data_char[0]) ) {

					var text_node = data_char[0];
					window.getSelection().anchorNode.data = data_char.substring(1,data_char.length);
					prev_node.innerHTML += text_node;
					var text_link = prev_node.innerHTML.substring(1,prev_node.innerHTML.length);
					prev_node.href = text_link;
					$(".typeahead").eq(1).val(text_link).trigger("input");
					/*doRestore($(this),positionCursorSaved);*/
				}
			} else if ( next_node != undefined && next_node.nodeName == "A" ) {
				if(next_node.childNodes[0].data[0] != "@" || (nodesForcus.node_focus.nodeName = "#text" && nodesForcus.node_focus.data[nodesForcus.node_focus.data.length - 1] != " ")){
					linkSelection = {
						start: savedSelection.start,
			            end: savedSelection.start + next_node.childNodes[0].data.length
					};
					restoreSelection(node_focus, linkSelection);
					nodesForcus.node_focus.data += next_node.childNodes[0].data;
					nodesForcus.node_parent.removeChild(next_node);
					/*doRestore($(this),positionCursorSaved);*/
				}
			}else if(nodesForcus.node_parent.nodeName == "A") {
				prev_node = GetPreviousSibling(nodesForcus.node_parent);
		    	next_node = GetNextSibling(nodesForcus.node_parent);
				if(nodesForcus.node_focus.data.length == 1) {
					linkSelection = {
						start: savedSelection.start - 1,
			            end: savedSelection.start
					};
					restoreSelection(nodesForcus.node_focus, linkSelection);
					if(prev_node != undefined && next_node != undefined){
						if(prev_node.nodeName == "#text" && next_node.nodeName == "#text"){
							prev_node.data += nodesForcus.node_focus.data + next_node.data;
							nodesForcus.node_par_parent.removeChild(nodesForcus.node_parent);
							nodesForcus.node_par_parent.removeChild(next_node);
						}
					}else if(prev_node != undefined && prev_node.nodeName == "#text" ) {
						prev_node.data += nodesForcus.node_focus.data;
						node_par_parent.removeChild(nodesForcus.node_parent);
					}else if(next_node != undefined && next_node.nodeName == "#text" ) {
						next_node.data = nodesForcus.node_focus.data + next_node.data;
						nodesForcus.node_par_parent.removeChild(nodesForcus.node_parent);
					} else {
						removeSelectionFormatting();
					}
					$(".typeahead").eq(1).val("@").trigger("input");
					/*doRestore($(this),positionCursorSaved);*/
				}else {
					var text_link = nodesForcus.node_focus.data.substring(1,nodesForcus.node_focus.data.length);
					$(".typeahead").eq(1).val(text_link).trigger("input");
				}
			}else {
				if(text_link != "" && nodesForcus.node_focus.data != undefined && nodesForcus.node_focus.data != "" && nodesForcus.node_parent.nodeName == "A"){
					var string = nodesForcus.node_focus.data;
            		keySearch = string.substring(1,nodesForcus.node_focus.data.length);
					$(".typeahead").eq(1).val(keySearch).trigger("input");
	            }
			}
		});
	});
</script>
<style>
a {
	text-decoration: none;
}
#div-editable
{
    -moz-appearance: textfield-multiline; 
    font: medium -moz-fixed;
    font: -webkit-small-control;
    font-size: 13px;
    overflow: hidden;
    min-height: 200px;
    width: 30%;
    border: solid 1px #5E54EF;
}

#div-editable div
{
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}
.select {
	background: blue;
	color: white;
	cursor: pointer;
}
#list_search {
	max-width: 200px;
}

</style>
{{ Form::open(array('route' => 'status','id' => 'form_status','class' => 'from_editStatus' )) }}
<div class="div-editable" id="div-editable" contenteditable="true"><div>status...</div></div>
<input class="typeahead" type="hidden" >
{{ Form::submit('status',array('class' => 'btn btn_login' )); }}<br />
{{ Form::close() }}
<?php if(isset($a)) print_r($a);?>
<script type="text/javascript">
	var substringMatcher = function(strs) {
	  	return function findMatches(q, cb) {
	    var matches, substrRegex;
	 
	    // an array that will be populated with substring matches
	    matches = [];
	    // regex used to determine if a string contains the substring `q`
	    substrRegex = new RegExp(q, 'i');
	 
	    // iterate through the pool of strings and for any string that
	    // contains the substring `q`, add it to the `matches` array
	    $.each(strs, function(i, str) {
	      if (substrRegex.test(str)) {
	        // the typeahead jQuery plugin expects suggestions to a
	        // JavaScript object, refer to typeahead docs for more info
	        matches.push({ value: str });
	      }
	    });
	 
	    cb(matches);
	  };
	};
 
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
 
$('.typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 0
},
{
  name: 'states',
  displayKey: 'value',
  source: substringMatcher(states)
});

$('.typeahead').on('typeahead:selected', function (e, datum) {
	var nodesForcus = getNodeSelection();
	var linkSelection = {
		start: datum.value.length + 2 ,
        end: datum.value.length + 2
	};
	nodesForcus.node_focus.data = '@'+datum.value;
	var next_node_parent = GetNextSibling(nodesForcus.node_parent);
	if(next_node_parent != undefined && next_node_parent!=null) {
		if(next_node_parent.data == "" || next_node_parent.data == null ) next_node_parent.data = ' ';
		
	}else {
		$(nodesForcus.node_par_parent).append(' ');
		next_node_parent = GetNextSibling(nodesForcus.node_parent);
	}
	linkSelection = {
		start: next_node_parent.data.length ,
        end: next_node_parent.data.length
	};
	restoreSelection(next_node_parent, linkSelection);
});

  $(document).ready(function() {

function getLatLong(address){
  var geo = new google.maps.Geocoder;
  var location = null;
  geo.geocode({'address':address},function(results, status){
      if (status == google.maps.GeocoderStatus.OK) {
        location = results[0].geometry.location;
      }
   });
	return location;
  }
 getLatLong("33 pho hue");
  });
  function edit_status(Elm){
  	var ElmEdit = Elm.next();
  	ElmEdit.addClass('div-editable');
  	ElmEdit.attr('contenteditable', 'true');
  	ElmEdit.focus();
  	return false;
  }
</script>
<style type="text/css">
	/* custom font! */
/* ------------ */

/* scaffolding */
/* ----------- */

html {
  overflow-y: scroll;
  *overflow-x: hidden;
}

.container {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.tt-dropdown-menu,
.gist {
  text-align: left;
}

/* base styles */
/* ----------- */

html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.2;
  color: #333;
}

a {
  color: #03739c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.table-of-contents li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.table-of-contents li a {
  font-size: 16px;
  color: #999;
}

.title,
.example-name {
  font-family: Prociono;
}

p + p {
  margin: 30px 0 0 0;
}

/* site theme */
/* ---------- */

.title {
  margin: 20px 0 0 0;
  font-size: 64px;
}

.example {
  padding: 30px 0;
}

.example-name {
  margin: 20px 0;
  font-size: 32px;
}

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-dropdown-menu {
  width: 422px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.gist {
  font-size: 14px;
}

/* example specific styles */
/* ----------------------- */

#custom-templates .empty-message {
  padding: 5px 10px;
 text-align: center;
}

#multiple-datasets .league-name {
  margin: 0 20px 5px 20px;
  padding: 3px 0;
  border-bottom: 1px solid #ccc;
}

#scrollable-dropdown-menu .tt-dropdown-menu {
  max-height: 150px;
  overflow-y: auto;
}

#rtl-support .tt-dropdown-menu {
  text-align: right;
}



</style>
<?php  if(isset($status)) 
{
	if(isset($errors)) print_r($errors);
	foreach ($status as $key) {
		echo '<div>';
		echo Form::open(array('route' => array('status', $key->id),'class' => 'from_editStatus' ));
		echo '<a href="#" onclick="edit_status($(this))">edit</a>';
		echo '<div class="test">';
		echo $key->content ;
		echo '</div>'; 
		echo Form::submit('save edit',array('class' => 'btn btn_login' )); 
		echo '<br>';
		echo Form::close();
		echo '</div>';
	}
}
?>
<script type="text/javascript">
  $('form').submit(function( event ) {
  	var form = $(this);
	var element;
	form.children('.div-editable').each(function(){
	  element = $(this);
	  form.append($('<input/>', {
	    type:'hidden',
	    name:'conten',
	    value:element.html()
	  }));
	});
});

</script>
@stop